<template>
  <!-- 文件上传组件：可上传图片 视频等 -->
  <button type="button" @click="selectFile" class="btn btn-white btn-default btn-round">
    <i class="fa fa-upload"></i>
    {{text}}
  </button>
  <!-- 隐藏显示了上传控件 而是由button触发 -->
  <input ref="file" class="hidden" type="file" :id="inputId+'-input'" @change="uploadFile">
</template>

<script>
import axios from "axios";
import {ref} from "vue";

export default {
  name: 'file',
  components: {},
  props: {
    text: {
      type: String,
      default: '上传文件'
    },
    // 文件格式
    suffixs: {
      type: Array,
      default: () => []
    },
    // 上传成功回调
    afterUpload: {
      type: Function,
      default: null
    },
    // 文件上传控件id
    inputId: {
      type: String,
      default: 'file-upload-input'
    },
    // 文件分类 用途
    use: {
      type: String,
      default: ''
    }
  },

  setup(props) {
    const file = ref();
    /**
     * 选择图片
     */
    const selectFile = () => {
      // 触发文件上传
      $('#' + props.inputId + '-input').trigger('click');
    }

    /**
     * 上传
     */
    const uploadFile = () => {
      let formData = new window.FormData();
      let fileObj = file.value.files[0]; // 文件对象

      // 判断文件格式是否正确？jpg,jpeg,png
      // let suffixs = ['jpg', 'jpeg', 'png'];
      let validateSuffix = false; // 效验标志
      let fileName= fileObj.name.toLowerCase(); // 文件名字+后缀
      let fileSuffix = fileName.split('.')[1]; // 文件后缀
      for (let i = 0; i < props.suffixs.length; i++) {
        if (props.suffixs[i] === fileSuffix) {
          validateSuffix = true;
          break;
        }
      }
      if (!validateSuffix) {
        Toast.warning("文件格式只能为:！" + props.suffixs.join(","));
        return;
      }

      // formData.append('file', document.querySelector('#file-upload-input').files[0])
      formData.append('file', fileObj); // 文件对象
      formData.append('use', props.use); // 文件用途 存放的位置分类

      file.value.value = ''; // 这行代码用来清空input的值，以便下次选择文件

      Loading.show();

      axios.post(process.env.VUE_APP_SERVER + "/file/admin/upload", formData).then((response) => {
        const resp = response.data;
        Loading.hide();
        if (resp.success) {
          Toast.success("文件上传成功！");
          let file = resp.content;
          props.afterUpload(file); // 给父组件返回文件 对象信息
        }
      })
    }
    
    return {
      selectFile,
      uploadFile,
      file,
    }
  }
}
</script>

<style scoped>

</style>
